<!-- 顶部复选框 -->
<template>
  <div class="check-box">
    <div class="top">
      <div class="title">
        请选择课程销售地区
      </div>
      <div class="check">
        <div>
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </div>
     
        <el-checkbox-group v-model="checkedRegion" @change="handleCheckedRegionChange">
          <el-checkbox v-for="(diqu, index) in region" :key="index" :label="diqu">{{ diqu }}</el-checkbox>
        </el-checkbox-group>
       
      </div>
    </div>
    <div class="bottom">
      <div class="zhanwei"></div>
      <div class="btn">
        <el-button type="primary" size="mini">查询</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 父组件传来的 全选 和 其他选项 的勾选与否
  props:['checkAllNow','checkedRegionNow','region','isIndeterminateNow'],
  data(){
    return {
      checkedRegion:this.checkedRegionNow,
      checkAll:this.checkAllNow,
      isIndeterminate:this.isIndeterminateNow
    }
  },
  methods: {
     handleCheckAllChange(val) {
        this.checkedRegion = val ? this.region : [];
        this.isIndeterminate = false;
      },
      handleCheckedRegionChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.region.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.region.length;
      }
  }
}
</script>

<style lang="less" scoped>
.check-box {
  width: 100%;
  height: 114px;
  background-color: #ffffff;
  margin-bottom: 15px;
  padding: 5px 10px;

  .top {
    width: 100%;
    height: 41px;
    display: flex;

    .title {
      width: 200px;
      height: 28px;
      padding-top: 7px;
      padding-left: 15px;
      text-align: right;
      color: #5e5d5e;
      font-size: 13px;
    }

    .check {
      margin-left: 15px;
      height: 28px;
      display: flex;
      width: 900px;
      margin-top: 7px;

      div {
        width: 83px;
        height: 28px;
        color: #555555;
        font-size: 14px;
        display: flex;

        /deep/.el-checkbox__inner {
          width: 20px;
          height: 20px;
        }

        /deep/.el-checkbox__inner::after {
          height: 12px;
          left: 6px;
          top: 0px;
          width: 6px;
        }

        /deep/.el-checkbox__input.is-checked+.el-checkbox__label {
          color: #606266;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: 38px;
    margin-top: 20px;
    margin-bottom: 15px;
    display: flex;

    .zhanwei {
      width: 200px;
      height: 28px;
      padding-top: 7px;
      padding-left: 15px;
    }

    .btn {
      margin-left: 15px;

      /deep/.el-button--primary {
        border-radius: 0%;
        background-color: #108cee;
        font-size: 14px;
      }
    }
  }
}
</style>